<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="css/index.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/animate.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.nav.js"></script>
<script src="js/wow.min.js"></script>
<script>
var clientWidth;
$(function(){
    var wow = new WOW({
    offset: 200,

});
    wow.init();
    $("#nav").onePageNav({
        begin:function(){
            if($("#nav_btn").css("display")!="none"){
                $("#nav_btn").click();
            }            
        },
    });
    setFontSize();
    // 窗口改变事件
    $(window).resize(function(){
        setFontSize();
    });
    function setFontSize(){
        clientWidth=document.body.clientWidth;
        var fontSize=clientWidth*0.00833333;
        // alert(fontSize);
        $("html").css("font-size",fontSize+"px");
    }
})
</script>
<title>无标题文档</title>


</head>

<body>
<!-- 头部 -->
<nav class="navbar navbar-default navbar-fixed-top" id="nav">
    <div class="container-fluid container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false" id="nav_btn">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button> 
            <a  class="logo" href="#"><img src="images/logo.png"></a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#index">首页</a></li>
                <li><a href="#forum">论坛</a></li>
                <li><a href="#web">前端开发</a></li>
                <li><a href="#new">最新课程</a></li>
                <li><a href="#app">移动APP</a></li>
                <li><a href="#contact_us">联系我们</a></li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<!-- 巨幕 -->
<div class="content-box jumbotron" id="index">
    <div class="container">
      <h1 class="wow bounceInDown" data-wow-duration="1s" data-wow-delay="0.5s">bootstrap实战课程等你来战！</h1>
      <p class="wow bounceInDown" data-wow-duration="1s" data-wow-delay="1.0s">本套课程适用于：1.WEB开发人员；2.网站维护人员、管理人员</p>
      <p class="wow bounceInDown" data-wow-duration="1s" data-wow-delay="2.0s">培训技能的目标：使用bootstrap框架快速构建响应式网页，颠覆传统WEB前端！</p>
    </div>
</div>
<!-- 打开方式 -->
<div class="row container text-center open" id="forum">
    <div class="col-md-4 wow zoomInRight" data-wow-duration="1s" data-wow-delay="0.5s">
    	<a class="andr" href="#">
        	<img src="images/Android.png">
            <h2>Android开发</h2>
            <p>Android开发技术交流、问题求助、实战案例分享</p>
        </a>
    </div>
    <div class="col-md-4 wow zoomInRight" data-wow-duration="1s" data-wow-delay="1.0s">
    	<a class="andr" href="#">
        	<img src="images/iOS.png">
            <h2>iOS开发</h2>
            <p>iOS开发技术交流，海量iOS实战干货分享</p>
        </a>
    </div>
    <div class="col-md-4 wow zoomInRight" data-wow-duration="1s" data-wow-delay="2.0s">
    	<a class="andr" href="#">
        	<img src="images/PC.png">
            <h2>底层嵌入式开发</h2>
            <p>底层嵌入式开发、实战案例等技术交流讨论</p>
        </a>
	</div>
</div>
<!-- HTML5前端开发 -->
<div class="two-content text-center" id="web">
    <div class="container">
        <div class="row container ">
            <div class="col-md-6 text-left wow bounceInLeft" data-wow-duration="1s" data-wow-delay="1s">
                <h3>HTML5前端开发</h3>
                <p>一线资深前端开发工程师倾情打造！助你完成普通程序员到优秀工程师的华丽升级！</p>
                <p><a href="#"><img  class="img-logo" src="images/logo-f.png"></a>使用HTML5与CSS3技术轻松实现设备自适应展示</p>
                <p><a href="#"><img  class="img-logo" src="images/logo-f.png"></a>清晰明了的语义代码结构，更高的可读性、更利于页面维护的。</p>
            </div>
            <div class="col-md-6 wow bounceInRight" data-wow-duration="1s" data-wow-delay="1s">
                <a href="#"><img src="images/HTML5.png"></a>
            </div>
        </div>
    </div>
</div>
<!-- bootstrap实战视频教程 -->
<div class="two-content bootstrap text-center" id="new">
    <div class="container">
        <div class="row container wow bounceInLeft" data-wow-duration="1s" data-wow-delay="1s">
            <div class="col-md-6">        
            	<a href="#"><img src="images/bootstrap.png"></a>
            </div>
            <div class="col-md-6 col-sm-12 text-left  wow bounceInRight" data-wow-duration="1s" data-wow-delay="1s">
                <h3>bootstrap实战视频教程</h3>
                <p>Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先 
    的 WEB 项目。</p>
                <p><a href="#"><img  class="img-logo" src="images/logo-h.png"></a>你的网站和应用能在 Bootstrap 的帮助下通过同一份代码快速、有效适配手机、平  
              板、PC设备。</p>
                <p><a href="#"><img  class="img-logo" src="images/logo-h.png"></a>Bootstrap 提供了全面、美观的文档。你能在这里找到关于 HTML 元素、HTML 
              和 CSS 组件、jQuery 插件方面的所有详细文档。</p>
            </div>        
        </div>
    </div>
</div>
<!-- 加入学习 -->
<div class="ui-html ui last text-center">
    <div class="container">
        <div class="row container">
            <div class="col-md-4 wow flipInY" data-wow-duration="0.5s" data-wow-delay="1s">
                <img src="images/UI.png">
                <input type="button" value="加入学习">
            </div>
             <div class="col-md-4 wow flipInY" data-wow-duration="0.5s" data-wow-delay="1s">
                <img src="images/HTML.png">
                <input type="button" value="加入学习">
            </div>
            <div class="col-md-4 wow flipInY" data-wow-duration="0.5s" data-wow-delay="1s">
                <img src="images/UI.png">
                <input type="button" value="加入学习">
            </div>
             <div class="col-md-4 wow flipInY" data-wow-duration="0.5s" data-wow-delay="1s">
                <img src="images/HTML.png">
                <input type="button" value="加入学习">
            </div>
            <div class="col-md-4 wow flipInY" data-wow-duration="0.5s" data-wow-delay="1s">
                <img src="images/UI.png">
                <input type="button" value="加入学习">
            </div>
             <div class="col-md-4 wow flipInY" data-wow-duration="0.5s" data-wow-delay="1s">
                <img src="images/HTML.png">
                <input type="button" value="加入学习">
            </div>        
        </div>
    </div>
</div>
<!-- APP下载 -->
<div class="three-content text-center" id="app">
    <div class="container">
        <div class="row container ">
            <div class="col-md-6 wow bounceInLeft" data-wow-duration="1s" data-wow-delay="1s">        
            	<a href="#"><img src="images/jingji.png" ></a>
            </div>
            <div class="col-md-6 text-left wow bounceInRight" data-wow-duration="1s" data-wow-delay="1s">
                <h3>重庆经济学院移动APP下载</h3>
                <p>全新UI交互，与新网站数据同步，更加丰富的课程，开启精彩无限，语音搜索课程，喊出你想要的课程，一件收藏，方便自己重复学习，离线下载课程，在哪儿都能开！</p>
                <div class="col-md-6 .col-sm-12">
                    <input  class="ios-download" type="button" value="">              
                </div>
                <div class="col-md-6 .col-sm-12">
                    <input class="androd-download" type="button" value="">
                </div>
            </div>        
        </div>
    </div>
</div>
<!-- footer -->
<div class="footer-top  wow zoomInRight" data-wow-duration="1s" data-wow-delay="0.5s" id="contact_us">
    <div class="container">
        <div class="row">
            <div class="col-md-6 ">
                <h1>联系我们</h1>
                <p>经济学院是重庆经济技术有限公司旗下一个IT在线教育平台，目前已有30万注册用户，10万以上APP下载量，5000小时视频内容。 我们从不说空话，专注于IT在线教育，脱离传统教育的束缚，让你走哪学哪，想学就学。逗比的老师，贴心的助教，在这儿你能感受到来自五 湖四海伙伴们热情和踏实的学习态度！</p>
                <ul>
                    <li><img src="images/beat1.png"> 地址:重庆市大渡口区九宫庙软件园D5-11</li>
                    <li><img src="images/beat2.png"> 联系电话：028-68567913</li>
                    <li><img src="images/beat3.png"> 电子邮箱：985248952@qq.com</li>
                </ul>
            </div>
            <div class="col-md-6 ">
                <form class="form-horizontal ">
                    <div class="form-group form-group-sm">
                        <div class="col-sm-6 ">
                          <input type="text" class="form-control" id="inputEmail3" placeholder="姓名">
                        </div>
                        <div class="col-sm-6">
                          <input type="text" class="form-control" id="inputEmail3" placeholder="邮箱">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-12">
                          <input type="text" class="form-control" id="inputEmail3" placeholder="标题">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-12">
                            <textarea class="form-control" rows="3"  placeholder="内容"></textarea>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-default form-control">提交</button>                    
                </form>
            </div>    
        </div>
    </div>
</div>
<footer>
    <div class="container  text-center">
        <p>Copyright © 2012-2015  www.maiziedu.com  蜀ICP备13014270号-4</p>
    </div>
</footer>
</body>
</html>
